﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Bing Maps Zoom Level Control</title>
    <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
    <style type="text/css">
        #myMap
        {   
            position: relative;
            width: 600px;
            height: 400px;
        }

        #zoomContainer
        {
            width: 46px;
            position: relative;
            top: -320px;            /* to be on top of the map */
            left: 20px;
        }

        #zoomSlider
        {
            width: 46px;
            height: 240px;
            -ms-writing-mode: bt-lr;
            padding: 0px;
            margin: 0px;
        }

        #zoomSlider::-ms-track
        {
            color: transparent;
            width: 12px;
            height: 240px;
            padding: 0px 17px 0px 17px;
            margin: 0px;
            border: 0px;
            background-color: rgba(0, 0, 0, 0.0);
        }

        #zoomSlider::-ms-fill-upper
        {
            width: 8px;
            margin: 0px;
            padding: 0px;
            background-color: rgb(250, 247, 245);
            border: 2px solid rgb(203, 212, 231);
            border-radius: 6px 6px 0px 0px;
        }

        #zoomSlider::-ms-fill-lower
        {
            width: 8px;
            margin: 0px;
            padding: 0px;
            background-color: rgb(250, 247, 245);
            border: 2px solid rgb(203, 212, 231);
            border-radius: 0px 0px 6px 6px;
        }

        #zoomSlider::-ms-thumb
        {
            width: 10px;
            height: 30px;
            margin: 0px;
            padding: 0px;
            border-radius: 5px;
            border-style: none;
            background-color: rgb(54, 154, 202);
        }

        #zoomSlider:hover::-ms-thumb
        {
            background-color: rgb(55, 169, 227);
        }
    </style>
    <script type="text/javascript">
        var map = null;
        var control = null;

        // when the user is manipulating the slider which relay the change to the map, 
        // we should ignore the view change events back from the map and don't put that change back to slider.        
        var initiatedBySlider = false;

        // if the view change is initiated by the map and not by the slider,
        // for example a touch zoom gesture on the map, then this flag is set and the slider should just 
        // update its value without telling the map to zoom again.
        var initiatedByMap = false;

        var slider = null;

        // the zoom level that is set at the beginning and later set by user input on the slider
        var zoomLevelSet = 0;   

        function init() {
            slider = document.getElementById("zoomSlider");
            slider.addEventListener("change", sliderMove, false);
            zoomLevelSet = slider.valueAsNumber;

            // listen for the developer key that the sample user provides
            window.addEventListener("message", receiveMessage, false);
        }
        
        function receiveMessage(event) {
            if (!map) {
                getMap(event.data);
            }
        }

        function getMap(developerKey) 
        {
            map = new Microsoft.Maps.Map(document.getElementById("myMap"),
            {
                credentials: developerKey,
                center: new Microsoft.Maps.Location(47.651, -122.133),
                mapTypeId: Microsoft.Maps.MapTypeId.road,
                zoom: zoomLevelSet,
                width: 600,
                height: 400,
                showDashboard: false,
            });

            Microsoft.Maps.Events.addHandler(map, 'viewchange', viewChangeHandler);
   
        }
 
        function viewChangeHandler()
        {
            var newLevel = map.getZoom();

            if (!initiatedBySlider) {
                // there's a change initiated by map. the slider should move once without setting the map.
                initiatedByMap = true;
                slider.valueAsNumber = newLevel;
                return;
            }

            if (initiatedBySlider && (newLevel == zoomLevelSet)) {
                // the map has finished the zooming that the user initiated on the slider.
                initiatedBySlider = false;
                return;
            }
        }
            
        function sliderMove()
        {
            if (initiatedByMap) {
                // the interaction is initiated on the map, not on the slider, therefore should not set the map again.
                initiatedByMap = false;
                return;
            }

            zoomLevelSet = slider.valueAsNumber;           
            initiatedBySlider = true;

            if (map) {
                map.setView({ zoom: zoomLevelSet });
            }
        }


    </script>
</head>
<body onload="init();">
    <div id="myMap">
    </div>
    <div id="zoomContainer">
        <input type="range" id="zoomSlider" min="1" max="20" value="7" />
    </div>
</body>
</html>
